<template>
	<view class="content ffffff padding">
		<view class="flexbetween">
			<view class="color_ling text_x">添加服务价格</view>
			<view class="imgBox" @click="addservice">
				<image src="/static/image/home/add.png" mode=""></image>
			</view>
		</view>
		<view style="padding-bottom: 100rpx;">
			<view class="margin_top margin_bottom3" v-for="(item,index) in service_sku" :key="index">
				<view class="padding f7f7f7 border_bottom_solid">
					<input class="text_a price" type="number" placeholder="1.输入服务价格，例如:✘✘元" v-model="item.price"
						placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;">
				</view>
				<view class="padding f7f7f7 flexbetween">
					<input class="text_a" type="text" placeholder="2.请输入服务内容，例如:看财运" v-model="item.name"
						placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;">
					<image class="imgDelete" src="/static/image/mine/delete.png" mode="" @click="del(index)"></image>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="savefn">保存</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				service_sku: [{
					name: "",
					price: "",
				}]
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.service_sku))
			this.service_sku = data
			console.log(this.service_sku)
		},
		watch: {
			service_sku: {
				handler(newval) {
					if (newval.length == 0) {
						this.addservice()
					}
				},
				deep: true
			}
		},
		methods: {
			addservice() {
				this.service_sku.push({
					name: "",
					price: "",
				})
			},
			del(index) {
				this.service_sku.splice(index, 1)
			},
			savefn() {
				let arr = JSON.parse(JSON.stringify(this.service_sku))
				arr.forEach((item, index) => {
					if (item.name == "" || item.price == "") {
						arr.splice(index, 1)
					}
				})
				if (arr.length == 0) {
					httpRequest.toast("请至少添加一项服务，并填写完整！")
					return false
				}
				uni.$emit("serviceGG", arr)
				uni.navigateBack(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 36rpx;
		height: 36rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.border_bottom_solid {
		border-bottom: 1rpx solid #EFEFEF;
	}

	.imgDelete {
		width: 24rpx;
		height: 26rpx;
	}

	.price {
		color: #F3271C;
	}
</style>